<template>
  <div class="table-title">
    <a-button type="primary" @click="showModal = true">新建用户</a-button>
  </div>
  <UserTable @update="userUpdate" ref="userTable"/>
  <a-modal
      v-model:visible="showModal"
      title="创建用户"
      class="user-view-modal"
      @ok="submit"
      @cancel="hideModal"
  >
    <a-form :model="formState" :label-col="{ span: 4 }" ref="formRef">
      <a-form-item label="用户名" name="username" :rules="[ {required: true,message:'请输入用户名'} ]">
        <a-input v-model:value="formState.username"/>
      </a-form-item>
      <a-form-item label="账号" name="account" :rules="[ {required: true,message:'请输入账号'} ]">
        <a-input v-model:value="formState.account"/>
      </a-form-item>
      <a-form-item label="密码" name="password" autocomplete="off" :rules="[ {required: updateId === 0,message:'请输入密码'} ]">
        <a-input-password v-model:value="formState.password" :placeholder="updateId === 0 ? '' : '不输入则不修改密码'"/>
      </a-form-item>
      <a-form-item label="确认密码" name="confirmPassword" autocomplete="off" :rules="[
          {
            trigger: 'change',
            validator: confirmPassword,
          }
      ]">
        <a-input-password type="password" v-model:value="formState.confirmPassword"/>
      </a-form-item>
      <a-form-item label="用户类型" name="type">
        <a-radio-group v-model:value="formState.type">
          <a-radio value="0">学生</a-radio>
          <a-radio value="1">管理员</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
          label="头像"
          name="avatar"
          :wrapperCol="{span: 8}"
          :rules="[
            {required: true,message:'请上传头像'}
          ]"
      >
        <a-upload-dragger
            :style="{
              backgroundImage: `url(${avatarUrl})`,
              backgroundSize: '100%'
            }"
            accept="image/*"
            :showUploadList="false"
            :beforeUpload="avatarChange"
        >
          <p class="ant-upload-drag-icon">
            <PlusOutlined></PlusOutlined>
          </p>
          <p class="ant-upload-text">点击或拖拽到此处上传头像</p>
        </a-upload-dragger>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import {computed, reactive, ref} from "vue";
import {PlusOutlined} from '@ant-design/icons-vue'
import {createUserApi, updateUserApi} from "@/apis/user";
import UserTable from '@/components/UserView/UserTable.vue'
import type {UserInfo} from "@/apis/user";
import type {RuleObject} from "ant-design-vue/es/form";
import {filePathTransform} from "@/utils";


// 表单
const formRef = ref();
const showModal = ref(false);
const hideModal = () =>{
  formRef.value.resetFields();
  Object.assign(formState,initFormState());
}
const initFormState: () => UserInfo = () => ({
  username: '',
  password: '',
  account: '',
  avatar: '',
  type: '0',
  confirmPassword: ''
});
const formState = reactive<UserInfo>(initFormState());
const confirmPassword = (r: RuleObject, v: string) => {
  if (v !== formState.password) {
    return Promise.reject('两次输入的密码不一致')
  } else {
    return Promise.resolve();
  }
}
// 图片切换
const avatarChange = (file: File) => {
  formState.avatar = file;
  return false;
}

// 头像预览
const avatarUrl = computed(() =>
    formState.avatar instanceof File
        ?
        URL.createObjectURL(formState.avatar)
        :
        typeof formState.avatar === 'string'
            ?
            filePathTransform(formState.avatar)
            :
            ''
);
// 确定按钮点击
const submit = async () => {
  const res = await formRef.value.validate();
  delete res.confirmPassword;
  if(updateId.value === 0){
  await createUserApi(res)
  }else {
    await updateUserApi(res, updateId.value);
  }
  showModal.value = false;
  userTable.value.getUserList();
}


const updateId = ref(0);
// 修改
const userUpdate = (userInfo: UserInfo & { Id: number;user_name:string; }) => {
  Object.assign(formState, userInfo);
  formState.username = userInfo.user_name;
  updateId.value = userInfo.Id;
  showModal.value = true;
}


// 表格实例
const userTable = ref();
</script>

<style lang="less">
.user-view-modal {
  .ant-upload-drag {
    background-size: 100%;
  }
}
</style>